<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/userwelcome' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>账户管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的资料</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div class="clearfix title">
        <span class="title-text">我的资料</span>
      </div>

      <!-- 修改资料表单 -->
      <el-form ref="userInfoRef" v-model="userInfoForm" label-width="80px">
        <!-- 水平线 -->
        <el-divider content-position="center">
          <i class="el-icon-set-up"></i>
          基本信息
        </el-divider>

        <!-- 基本资料表单 -->
        <el-form-item label="我的昵称">
          <el-input v-model="userInfoForm.userName"></el-input>
        </el-form-item>

        <el-form-item label="真实姓名">
          <el-input v-model="userInfoForm.userRealName"></el-input>
        </el-form-item>

        <el-form-item label="邮箱地址">
          <el-input v-model="userInfoForm.email"></el-input>
        </el-form-item>

        <el-form-item label="电话号码">
          <el-input v-model="userInfoForm.userIdTel" readonly></el-input>
        </el-form-item>

        <el-form-item label="居住地址">
          <el-input v-model="userInfoForm.location"></el-input>
        </el-form-item>

        <el-form-item label="生日日期">
          <el-date-picker
            v-model="userInfoForm.birthday"
            type="date"
            size="large"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 按钮框 -->
        <el-form-item>
          <el-button type="primary" plain @click="updateUserInfo" size="mini"
            >保存</el-button
          >
          <el-button type="info" plain @click="cancelUserInfo" size="mini"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 引用网络接口
import {getSelectUser,getUpdate} from 'network/account'
export default {
  name: "MyInformation",
  data() {
    return {
      // 修改资料的表单
      userInfoForm: {
        userName: window.sessionStorage.getItem("userName"),
        userRealName: window.sessionStorage.getItem("userRealName"),
        email: window.sessionStorage.getItem("email"),
        userIdTel: window.sessionStorage.getItem("userIdTel"),
        birthday: window.sessionStorage.getItem("birthday"),
        location: window.sessionStorage.getItem("location"),
      },

      // 表单验证增加规则
      
    };
  },

  methods: {
    //获取所有信息的网络接口
    // 查看用户详细信息接口
    netgetSelectUser(formdataSee){
      getSelectUser(formdataSee).then(res=>{
      // 如果正确请求
      // console.log(res);
      if(res !== '406'){
        // 赋值
        this.userInfoForm.userName = res.data.data.userName
        this.userInfoForm.userRealName = res.data.data.userRealName
        this.userInfoForm.email = res.data.data.eMail
        this.userInfoForm.userIdTel = res.data.data.userTel
        this.userInfoForm.birthday = res.data.data.birthday
        this.userInfoForm.location = res.data.data.location
        window.sessionStorage.setItem('userName',res.data.data.userName);
        window.sessionStorage.setItem('userRealName',res.data.data.userRealName);
        window.sessionStorage.setItem('email',res.data.data.eMail);
        window.sessionStorage.setItem('userIdTel',res.data.data.userTel);
        window.sessionStorage.setItem('birthday',res.data.data.birthday);
        window.sessionStorage.setItem('location',res.data.data.location);
      } 
    })
    },
    //修改用户资料的网络接口
    // 保存用户资料
    netgetUpdate(formdataUpdate,formdataSee){
      // 修改数据调用
      getUpdate(formdataUpdate).then(res=>{

      })
      // 查询修改的参数
      // this.$options.methods.netgetSelectUser(formdataSee)
      getSelectUser(formdataSee).then(res=>{
      // 如果正确请求
      // console.log(res);
      if(res !== '406'){
        // 赋值
      this.userInfoForm.userName = res.data.data.userName
      this.userInfoForm.userRealName = res.data.data.userRealName
      this.userInfoForm.email = res.data.data.eMail
      this.userInfoForm.userIdTel = res.data.data.userTel
      this.userInfoForm.birthday = res.data.data.birthday
      this.userInfoForm.location = res.data.data.location
      } 

    })

    },
    updateUserInfo() {
      this.$notify({
          title: '成功',
          message: '您已更新了您的信息，手动刷新即可看到新的信息',
          type: 'success'
        });
       let formdataSee = new FormData();
       formdataSee.append("userTel", this.$store.state.UserTelId);
       // 修改的数据
       let formdataUpdate = new FormData();
       formdataUpdate.append("userIdTel", this.$store.state.UserTelId)
       formdataUpdate.append("userName", this.userInfoForm.userName)
       formdataUpdate.append("userRealName", this.userInfoForm.userRealName)
       formdataUpdate.append("eMail", this.userInfoForm.email)
       formdataUpdate.append("birthday", this.userInfoForm.birthday)
       formdataUpdate.append("location", this.userInfoForm.location)
      //  直接把修改了的数据存储到sessionstorage里面
       window.sessionStorage.setItem('userName',this.userInfoForm.userName);
       window.sessionStorage.setItem('userRealName',this.userInfoForm.userRealName);
       window.sessionStorage.setItem('email',this.userInfoForm.email);
       window.sessionStorage.setItem('birthday', this.userInfoForm.birthday);
       window.sessionStorage.setItem('location',this.userInfoForm.location);
      //  调用修改个人信息接口
       this.netgetUpdate(formdataUpdate,formdataSee)

    },

    // 取消保存用户信息
    cancelUserInfo() {
      this.$confirm("是否取消修改资料信息", "取消", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        //点击确认返回到首页
        .then(() => {
          this.$router.push("/userwelcome");
        })
        // 取消操作，不做任何处理
        .catch(() => {});
    },
  },
  created() {
    // 查看的数据
    let formdataSee = new FormData();
    formdataSee.append("userTel", this.$store.state.UserTelId);


    // 调用获取信息的网络接口
    this.netgetSelectUser(formdataSee)

    // 修改的数据
    let formdataUpdate = new FormData();
    formdataUpdate.append("userTel", this.$store.state.UserTelId)
    formdataUpdate.append("userName", this.userInfoForm.userName)
    formdataUpdate.append("userRealName", this.userInfoForm.userRealName)
    formdataUpdate.append("eMail", this.userInfoForm.email)
    formdataUpdate.append("birthday", this.userInfoForm.birthday)
    formdataUpdate.append("location", this.userInfoForm.location)

    // 调用修改的接口
    this.netgetUpdate(formdataUpdate,formdataSee)
  },
};
</script>

<style lang="less" scoped>
.box-card {
  .title {
    height: 40px;
    line-height: 40px;
  }
  .title-text {
    font-size: larger;
    font-weight: bolder;
    display: block;
    text-align: center;
  }

  .el-form-item {
    margin-left: 15%;
    margin-right: 15%;
    .el-date-picker,
    .el-cascader,
    .el-inout {
      width: 100%;
    }
  }

  .el-row {
    margin-bottom: 30px;
    .text-item {
      display: block;
      font-size: 15px;
      font-weight: bolder;
      margin-bottom: 10px;
    }
    .line-main {
      margin: 10rpx 0;
      background: #fff;
      text-align: center;
      height: 100px;
      padding: 0 30px;
      line-height: 100px;
    }
    .line:before {
      content: "";
      display: block;
      height: 1px;
      width: 100%;
      background-color: #ccc; /*颜色需与主题大背景色一致*/
      position: relative;
      top: 50px; /*调节线高*/
      left: 0;
    }
    .line-text {
      display: inline-block;
      background: #fff;
      padding: 0 36px 0 36px;
      position: relative;
      font-weight: 500;
      color: grey;
    }
  }
}
</style>